<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 样式初始化 */

        *{
            margin:0;
            padding:0;
        }
        html,
        body {
            width:100%;
        }
        aside{
            height:100%;
            width:100%;
        }
        /* 列表的父盒子，限制宽高 */
        /* 注意设置overflow: hidden;样式后，超出这个盒子的ul将不会显示 */
        .draw{
            width:60px;
            height:500px;
            border:2px solid #ccc;
            overflow:hidden;
            position:fixed;
            left:10px;
            top:50%;
            transform:translateY(-50%);
            background-color:lightgreen;
        }
        /* li设置了浮动，所以ul要清除浮动 */
        ul:after{
            content:"";
            display:block;
            visibility:hidden;
            height:0;
            clear:both;
        }
        ul{
            zoom:1;
        }

        li{
            list-style:none;
            float:left;
            width:60px;
            height:60px;
            line-height:60px;
            text-align:center;
        }
    </style>
</head>

<body>
    <aside class="main">
        <div class="draw" id="draw">
            <ul>
                <li style="background:red">
                    列表一
                </li>
                <li style="background:orange">
                    列表一
                </li>
                <li style="background:orange">
                    列表一
                </li>
                <li style="background:orange">
                    列表一
                </li>
                <li style="background:orange">
                    列表一
                </li>
                <li style="background:orange">
                    列表一
                </li>
                <li style="background:orange">
                    列表一
                </li>
                <li style="background:orange">
                    列表一
                </li>
                <li style="background:orange">
                    列表一
                </li>
                <li style="background:orange">
                    列表一
                </li>
                <li style="background:blue">
                    列表一
                </li>
            </ul>

        </div>
    </aside>

    <script>
        ;(function(){
            var draw = document.querySelector("#draw")
            var ul = draw.children[0];

            var startY = 0; // touchstart时记录手指在Y轴上落点距离可是顶部距离
            var centerY = 0; // 用来记录每次触摸时上一次的偏移量
            var maxDown = 50;
            var maxUp = -(ul.offsetHeight - draw.offsetHeight + maxDown);
            ul.addEventListener("touchstart", function(e){
                startY = e.changedTouches[0].clientY
            })

            ul.addEventListener("touchmove", function(e){
                ul.style.transition = 'none';
                var dy = e.changedTouches[0].clientY - startY; // 差值
                var tempY = centerY + dy;
                if(tempY >= maxDown){0
                    tempY = maxDown
                }else if(tempY < maxUp){
                    tempY = maxUp
                }
                ul.style.transform = 'translateY(' + tempY + 'px)';
            })
            
            var maxUpBounch = 0;
            var maxDownBounch = -(ul.offsetHeight - draw.offsetHeight)
            ul.addEventListener("touchend", function(e){
                // 获取差值
                var dy = e.changedTouches[0].clientY - startY;
                centerY = centerY + dy;
                if(centerY > maxUpBounch){
                    centerY = maxUpBounch;

                    //添加过渡效果
                    ul.style.transition = 'transform .5s';
                    ul.style.transform = 'translateY(' + centerY + 'px)';
                } else if(centerY < maxDownBounch){
                    centerY = maxDownBounch;
                    
                    ul.style.transition = 'transform .5s';
                    ul.style.transform = 'translateY(' + centerY + 'px)';
                }
            })
        })()
    </script>
</body>

</html>